<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="名称"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleQuery()"> 查询 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="level1"
        :loading="loading"
        :pagination="false"
        @change="handleTableChange"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar" />
        </template>
        <template v-slot:doc="{ text, record }">
          <span
            >{{ getDocName(record.doc1Id) }} /
            {{ getDocName(record.doc2Id) }}</span
          >
        </template>
        <template v-slot:action="{ record }">
          <a-space size="small">
            <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
            <a-popconfirm
              title="删除后不可恢复，确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
            >
              <a-button type="primary" danger> 删除 </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
    title="文档表单"
    v-model:visible="modalVisible"
    :confirm-loading="modalLoading"
    @ok="handleModalOk"
  >
    <a-form :model="doc" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="名称">
        <a-input v-model:value="doc.name" />
      </a-form-item>
      <a-form-item label="父文档">
        <a-tree-select
          v-model:value="doc.parent"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择父文档"
          allow-clear
          multiple
          tree-default-expand-all
          :tree-data="treeSelectData"
          tree-node-filter-prop="label"
          :replaceFields="{
            children: 'children',
            label: 'name',
            value: 'id',
          }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="父文档名称">
        <a-select ref="select" v-model:value="doc.parent">
          <a-select-option value="0">无</a-select-option>
          <a-select-option
            v-for="c in level1"
            :key="c.id"
            :value="c.id"
            :disabled="doc.id === c.id"
          >
            {{ c.name }}
          </a-select-option>
        </a-select>
        <a-input v-model:value="doc.parent" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="doc.sort" />
      </a-form-item>

      <a-form-item label="排序">
        <div id="editor-container"></div>
      </a-form-item>
      <a-form-item label="排序">
        <div id="toolbar-container"></div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";
import { Tool } from "@/util/tool";
import { useRoute } from "vue-router";
// 富文本组件
import "@wangeditor/editor/dist/css/style.css";
import { createEditor, createToolbar } from "@wangeditor/editor";

// import Quill from "quill";

// const quillEditor = ref(null);

const text = ref("1");
const param = ref();
param.value = {};
const docs = ref();
const route = useRoute();
console.log("路由: ", route);
console.log("route.path: ", route.path);
console.log("route.query: ", route.query);
console.log("route.param: ", route.params);
console.log("route.fullPath: ", route.fullPath);
console.log("route.name: ", route.name);
console.log("route.meta: ", route.meta);

const loading = ref(false);

const columns = [
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "父文档名称",
    dataIndex: "parent",
  },
  {
    title: "排序",
    dataIndex: "sort",
  },
  {
    title: "Action",
    key: "action",
    slots: { customRender: "action" },
  },
];

// -------- 表单 ---------
/**
 * 数组，[100, 101]对应：前端开发 / Vue
 */
const docIds = ref();
const doc = ref();
const modalVisible = ref(false);
const modalLoading = ref(false);
const level1 = ref();
// 因为树选择组件的属性状态，会随当前编辑的节点而变化，所以单独声明一个响应式变量
const treeSelectData = ref();
treeSelectData.value = [];

const handleModalOk = () => {
  modalLoading.value = true;
  // doc.value.doc1Id = docIds.value[0];
  // doc.value.doc2Id = docIds.value[1];
  console.log(doc.value);
  // 转换 parent 的数组类型 转为 number 类型
  const newData = {
    ...doc.value,
    parent: doc.value.parent.length > 0 ? doc.value.parent[0] : 0,
  };
  axios.post("/doc/save", newData).then((response) => {
    modalLoading.value = false;
    const data = response.data; // data = commonResp
    if (data.success) {
      modalVisible.value = false;

      // 重新加载列表
      handleQuery({});
    } else {
      message.error(data.message);
    }
  });
};

/**
 * 新增
 */
const add = () => {
  modalVisible.value = true;
  doc.value = {
    ebookId: route.query.ebookId,
  };
  treeSelectData.value = Tool.copy(level1.value) || [];

  // 为选择树添加一个"无"
  treeSelectData.value.unshift({ id: 0, name: "无" });

  setTimeout(() => {
    // 创建编辑器
    const editor = createEditor({
      selector: "#editor-container",
    });
    // 创建工具栏
    const toolbar = createToolbar({
      editor,
      selector: "#toolbar-container",
    });
  }, 200); // 200 毫秒
};

/**
 * 将某节点及其子孙节点全部置为disabled
 */
const setDisable = (treeSelectData: any, id: any) => {
  // console.log(treeSelectData, id);
  // 遍历数组，即遍历某一层节点
  for (let i = 0; i < treeSelectData.length; i++) {
    const node = treeSelectData[i];
    if (node.id === id) {
      // 如果当前节点就是目标节点
      console.log("disabled", node);
      // 将目标节点设置为disabled
      node.disabled = true;

      // 遍历所有子节点，将所有子节点全部都加上disabled
      const children = node.children;
      if (Tool.isNotEmpty(children)) {
        for (let j = 0; j < children.length; j++) {
          setDisable(children, children[j].id);
        }
      }
    } else {
      // 如果当前节点不是目标节点，则到其子节点再找找看。
      const children = node.children;
      if (Tool.isNotEmpty(children)) {
        setDisable(children, id);
      }
    }
  }
};

const ids: Array<string> = [];
/**
 * 获取某节点及其子孙节点，存入ids。用于批量删除
 */
const getDeletIds = (treeSelectData: any, id: any) => {
  // console.log(treeSelectData, id);
  // 遍历数组，即遍历某一层节点
  for (let i = 0; i < treeSelectData.length; i++) {
    const node = treeSelectData[i];
    if (node.id === id) {
      // 如果当前节点就是目标节点
      console.log("disabled", node);
      // 将id存入数组
      ids.push(id);

      // 遍历所有子节点，将所有子节点id全部都存入 ids
      const children = node.children;
      if (Tool.isNotEmpty(children)) {
        for (let j = 0; j < children.length; j++) {
          getDeletIds(children, children[j].id);
        }
      }
    } else {
      // 如果当前节点不是目标节点，则到其子节点再找找看。
      const children = node.children;
      if (Tool.isNotEmpty(children)) {
        getDeletIds(children, id);
      }
    }
  }
};

/**
 * 编辑
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const edit = (record: any) => {
  modalVisible.value = true;
  doc.value = Tool.copy(record);
  docIds.value = [];

  // 不能选择当前节点及其所有子孙节点，作为父节点，会使树断开
  treeSelectData.value = Tool.copy(level1.value);
  setDisable(treeSelectData.value, record.id);

  // 为选择树添加一个"无"
  treeSelectData.value.unshift({ id: 0, name: "无" });

  setTimeout(() => {
    // 创建编辑器
    const editor = createEditor({
      selector: "#editor-container",
    });
    // 创建工具栏
    const toolbar = createToolbar({
      editor,
      selector: "#toolbar-container",
    });
  }, 200); // 200 毫秒
};

// 删除方法
const handleDelete = (id: number) => {
  getDeletIds(level1.value, id);
  console.log("");
  axios.delete("/doc/delete/" + ids.join(",")).then((response) => {
    const data = response.data; // data = commonResp
    if (data.success) {
      // 重新加载列表
      handleQuery({});
    } else {
      message.error(data.message);
    }
  });
};
// const level1 = ref();
// let docs: any;
/**
 * 查询所有文档
 **/
// const handleQueryDoc = () => {
//   loading.value = true;
//   axios.get("/doc/all").then((response) => {
//     loading.value = false;
//     const data = response.data;
//     if (data.success) {
//       docs = data.content;
//       console.log("原始数组：", docs);

//       level1.value = [];
//       // level1.value = Tool.array2Tree(docs, 0);
//       console.log("树形结构：", level1.value);

//       // 加载完文档后，再加载文档，否则如果文档树加载很慢，则文档渲染会报错
//       handleQuery({
//         page: 1,
//       });
//     } else {
//       message.error(data.message);
//     }
//   });
// };

const getDocName = (cid: number) => {
  // console.log(cid)
  let result = "";
  docs.value.forEach((item: any) => {
    if (item.id === cid) {
      // return item.name; // 注意，这里直接return不起作用
      result = item.name;
    }
  });
  return result;
};

/**
 * 数据查询
 **/
const handleQuery = () => {
  loading.value = true;
  // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
  docs.value = [];
  level1.value = [];
  axios.get("/doc/all").then((response) => {
    loading.value = false;
    const data = response.data;
    if (data.success) {
      docs.value = data.content;
      console.log("111111111111111111111111111 docs", docs.value);
      // 转换为树形结构，默认根级id 是 0
      level1.value = [];
      level1.value = Tool.array2Tree(docs.value, 0);
      console.log("111111111111111111111111111 level1", level1.value);
    } else {
      message.error(data.message);
    }
  });
};

onMounted(() => {
  handleQuery();
  // new Quill(quillEditor.value, {
  //   theme: "bubble",
  // });
});
</script>

<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>
